<template>
  <div class="NotFound">
    <div class="center">
      <div class="number">404</div>
      <div class="tip">页面不存在！ {{ num }}秒后将回到原处......</div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted, ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
/**倒计时 */
const num = ref(5);
let timer: NodeJS.Timer | null = null;
//生命周期 - 挂载
onMounted(() => {
  if (timer) clearInterval(timer);
  //倒计时
  timer = setInterval(() => {
    num.value--;
    if (num.value === 0) {//数到0就触发
      if (timer) clearInterval(timer);
      timer = null;
      router.back()
      router.back()//因为拦截的时候跳转了两次，所以返回时跳转两次
    }
  }, 1000);
});
//生命周期 - 销毁
onUnmounted(() => {
  if (timer) clearInterval(timer);
  timer = null;
});
</script>
<style lang="less" scoped>
.NotFound {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;

  .center {
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .number {
    font: 900 30vmin 'Consolas';
    letter-spacing: 5vmin;
    text-shadow: 2px -1px 0 #000, 4px -2px 0 #0a0a0a, 6px -3px 0 #0f0f0f, 8px -4px 0 #141414, 10px -5px 0 #1a1a1a, 12px -6px 0 #1f1f1f, 14px -7px 0 #242424, 16px -8px 0 #292929;
    color: #683ab7cb;
  }
}
</style>
